/**
 * 版本信息导出页面
 * wangmei
 */

import React from 'react';
import { Button, Table, Row, message } from 'antd';
import BreadcrumbCustom from '../BreadcrumbCustom';
import * as Request from '../../Server/Upgrade';
import * as Const from '../../common/const';
import * as Utils from '../../common/utils';
import TipModal from './VersioninfoTipModal';
import qs from 'qs';

const defaultPage = { page: Const.DEFAULT_PAGE, size: Const.DEFAULT_PAGE_SIZE };

class VersioninfoMangerOutput extends React.Component {
    constructor(props) {
        super(props);
        this.state = {};
        this.state = {
            loading: false, //表格加载样式
            data: [], //表格数据
            selectedRowKeys: [],
            selectedRows: [],
            tipShow: false, //提示信息显示状态
            showText: '', //提示文字信息
            showState: true, //

            
        };
    }

    componentWillMount() {
        this.getTableData(defaultPage);
    }

    //查询表格数据方法
    getTableData = (param) =>{
        this.setState({ loading: true });
        const _param = qs.stringify(param);
        Request.getVersionInfoGetList(_param).then(res => {
            if(res && res.code == Const.REQUEST_SUCCESS){
                const data = res.data;
                this.setState({
                    data: data,
                    loading: false,
                });
            }else{
                res && res.code !== Const.REQUEST_UNAUTHORIZED && message.error(res.msg);
            }
        });
    }


    handleSubmit = (e) => {
        e.preventDefault();
        this.props.form.validateFieldsAndScroll((err, values) => {

        });
    }

    //选中方法
    onSelectChange = (selectedRowKeys, selectedRows) =>{

        this.setState({ 
            selectedRows,
            selectedRowKeys });
    }

    //导出方法
    outPutFunc = () =>{
        const { selectedRows } = this.state;
        if(selectedRows.length==0){
            this.showModalFunc(true, '请选择需要导出的版本！', true);
        }else{
            //导出方法
            let versions = '';
            selectedRows.map((item, index)=>{
                let temp = 'versions='+item.id;
                versions = versions==''?temp:versions+'&'+temp;
            });
            Request.versionInfoGetExport(versions).then(res=>{
                const {data,headers} = res
                const filename = headers['content-disposition'].split("=")[1]
                var blob = new Blob([data], { type: 'text/plain;charset=utf-8' }); //将字符串转blob对象
                Utils.downloadExcel(blob, filename, data);
            });
        }
    }

    //显示提示信息页面
    showModalFunc = (flag, text, state) =>{
        this.setState({
            tipShow: flag,
            showText: text,
            showState: state
        })
    }

    backClick = () =>{
        this.props.history.push('/app/upgrade/version');
    }

    render() {
        const { loading, data, selectedRowKeys, tipShow, showText, showState } = this.state;

        const rowSelection = {
            selectedRowKeys,
            onChange: this.onSelectChange,
        };
        
        const columns = [
            {
                title: "主键",
                dataIndex: "id",
                align: 'center',
                width: '8%'
            }, {
                title: "默认下载地址",
                dataIndex: "svrRoot",
                align: 'center',
                width: '12%',
            }, {
                title: "客户端版本",
                dataIndex: "clientversion",
                align: 'center',
                width: '10%',
            }, {
                title: "升级后版本",
                dataIndex: "patchversion",
                align: 'center',
                width: '10%',
            }, {
                title: "下载到本地路径",
                dataIndex: "downdir",
                align: 'center',
                width: '15%',
            }, {
                title: "版本类型",
                dataIndex: "vertype",
                align: 'center',
                width: '15%',
                render: (text, record)=>{
                    let obj = Const.VERTYPE.filter(v=>v.value==text)[0];
                    return obj?obj.title:"";
                }
            }, {
                title: "备注",
                dataIndex: "remark",
                align: 'center',
                width: '15%',
            }, {
                title: "状态",
                dataIndex: "tag",
                align: 'center',
                width: '8%',
                render: (text, record)=>{
                    if(text==0){
                        return <text style={{ color: 'red'}} >禁用</text>
                    }else {
                        return <text style={{ color: '#32CD32'}}>在用</text>
                    }
                }
            }
        ];

        return(
            <div>
                <BreadcrumbCustom first={"导出版本"} />
                {tipShow&&<TipModal showModalFunc={this.showModalFunc} showText={showText} state={showState}/>}
                <Table
                    rowSelection={rowSelection}
                    dataSource={data}
                    className='common-font'
                    loading={loading}
                    columns={columns}
                    pagination={false}
                    scroll={{ y: 720 }}
                />
                <Row type="flex" justify="center" style={{ marginTop: 10, marginBottom: 10}}>
                    <Button type="primary" onClick={()=>this.outPutFunc()}>导出</Button>
                    <Button type="primary" onClick={this.backClick}>
                        返回
                    </Button>
                </Row>
                <style>{`
                    .ant-table-tbody > tr.ant-table-row-selected{
                        background:#fafafa;}
                    .ant-table-tbody > tr.ant-table-row-selected:hover{
                    background:#E6F7FF !important;}
                    .ant-table-tbody > tr.ant-table-row-selected td{
                    background:none;}
                `}</style>
            </div>
        );
    }
}

export default VersioninfoMangerOutput;